<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs lineColor="#3478F5" lineWidth="15" :scrollable="false" :activeStyle="{
		                 color: '#000000',
		                 fontWeight: 'bold',
		                 transform: 'scale(1.05)'
		             }" :inactiveStyle="{
		                 color: '#666666',
		                 transform: 'scale(1)'
		             }" :list="list1" @change="tabChage"></u-tabs>
		</u-sticky>
		<view class="mainpadding2" style="padding-bottom: 150rpx;">
			<view class="mainpadding_top" :class="tabsId==1?'xxkmsg':'kskmsg'" @click="jumpurl('/pages_mine/jilu','')">
				<view class="flexbetween" style="margin-top: 200rpx;">
					<view class="bai_text main_size bold" v-if="dataAll.expiretime_text">到期时间：{{dataAll.expiretime_text}}</view>
					<view class="bai_text main_size bold" v-else>暂未开通</view>
					<view class="flexright">
						<view class="bai_text main_size bold">记录</view>
						<u-icon name="arrow-right" color="#fff" size="16"></u-icon>
					</view>
				</view>
			</view>
			<view class="titletext bold margin_top hei_text">学习卡尊享权益</view>
			<view class="hei_text main_size bold margin_top">开卡之后可以考试除了Vip和精选课程的测试！</view>
			<view class="mainpadding_top ffffff radius flexbetween" @click="pickerdzshow=true">
				<view class="titletext hei_text bold">选择购买地区</view>
				<view class="flexright">
					<input type="text" placeholder="请选择购买地区" class="main_size hei_text bold" disabled=""
						style="text-align: right;" v-model="city_text">
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<view class="mainpadding_top ffffff radius flexbetween"
				@click="jumpurl('/pages_askquestion/xuanzenj?type=',1)">
				<view class="titletext hei_text bold">年级</view>
				<view class="flexright">
					<input type="text" placeholder="请选择年级" class="main_size hei_text bold" disabled=""
						style="text-align: right;" v-model="njInfo.name">
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<view class="mainpadding_top ffffff radius flexbetween" @click="selectxk">
				<view class="titletext hei_text bold">学科</view>
				<view class="flexright">
					<input type="text" placeholder="请选择学科" class="main_size hei_text bold" disabled=""
						style="text-align: right;" v-model="xkmsg.name">
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<view class="bglan mainpadding_top flexbetween" v-if="dataAll.name">
				<view class="lan_text bold titletext">{{dataAll.name}}</view>
				<view class="flexright" style="align-items: flex-end;">
					<view class="lan_text bold titletext">￥</view>
					<view class="lan_text bold" style="font-size: 50rpx;height: 60rpx;">{{dataAll.price}}</view>
				</view>
			</view>
		</view>
		<view class="posibottom mainpadding" v-if="dataAll.name">
			<view class="submitbtn" @click="submit">立即购买</view>
		</view>
		<pickercity :messageInfo="{pickerdzshow:pickerdzshow}" @surecity="surecity"></pickercity>
		<u-picker :show="xkshow" :columns="xkcolumns" title="选择学科" keyName="name" @cancel="xkshow=false"
			@confirm="xkconfirm"></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [{
					id: 1,
					name: '学习卡',
				}, {
					id: 2,
					name: '考试卡',
				}],
				tabsId: 1, //默认学习卡
				cityinfo: {},
				pickerdzshow: false,
				city_text: "",
				njInfo: {
					name: "",
					id: "",
					period: "",
				}, //本地存储的年级信息
				xkshow: false,
				xkcolumns: [],
				xkmsg: {
					id: "",
					name: "",
				},
				dataAll:{}
			}
		},
		onLoad() {
			this.getNjinfo()
		},
		onShow() {
			let _this = this
			uni.$off("checknj")
			uni.$on("checknj", data => {
				_this.njInfo = data
			})
			this.init()
		},
		watch: {
			"njInfo.id": {
				handler(newval) {
					if (newval != "" && this.cityinfo.cityid) {
						console.log(newval,this.cityinfo.cityid);
						this.getXkList()
					}
					this.xkmsg = {
						id: "",
						name: "",
					}
				},
				deep: true
			}
		},
		methods: {
			getNjinfo() { //获取本地选择的年级
				let njInfo = uni.getStorageSync("njInfo")
				if (njInfo) {
					this.njInfo = njInfo
				} else {
					this.njInfo = {
						name: "",
						id: "",
						period: "",
					}
				}
			},
			getXkList() { //获取学科数据
				httpRequest.request('/api/index/getsubject', 'GET', {
					education_grade_id: this.njInfo.id,
					period: this.njInfo.period,
					city: this.cityinfo.cityid
				}).then(res => {
					this.xkcolumns = []
					this.xkcolumns.push(res.data)
				})
			},
			selectxk() {
				if(!this.cityinfo.cityid){
					httpRequest.toast("请选择地区")
					return false
				}
				if(this.njInfo.id==""){
					httpRequest.toast("请选择年级")
					return false
				}
				if(!this.xkcolumns[0].length){
					httpRequest.toast("当前选择的数据下没有学科！")
					return false
				}
				this.xkshow = true
			},
			xkconfirm(e) { //学科确定
				this.xkmsg.name = e.value[0].name
				this.xkmsg.id = e.value[0].id
				this.xkshow = false
				this.init()
			},
			surecity(e) {
				this.pickerdzshow = false
				if (e) {
					console.log(e,"999");
					this.cityinfo = e
					this.city_text = e.provence + "/" + e.city
					this.getXkList()
					this.xkmsg = {
						id: "",
						name: "",
					}
				}
			},
			init() {
				if(!this.cityinfo.cityid)return
				if(!this.njInfo.id)return
				if(!this.xkmsg.id)return
				httpRequest.request('/api/member/card_show', 'GET', {
					city: this.cityinfo.cityid,
					card_type: this.tabsId,
					education_grade_id: this.njInfo.id,
					education_subject_id: this.xkmsg.id,
				}, false, false, true).then(res => {
					if(res.code==1){
						this.dataAll = res.data
					}else{
						this.dataAll = {}
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			tabChage(e) {
				this.tabsId = e.id
				this.init()
			},
			jumpurl(url, id) {
				uni.navigateTo({
					url: url + id
				})
			},
			submit(){
				let data = {
					vip_card_id:this.dataAll.vip_card_id,
					city:this.cityinfo.cityid,
					province:this.cityinfo.provenceid,
					card_type:this.tabsId,
					education_grade_id:this.njInfo.id,
					education_subject_id:this.xkmsg.id,
					pay_price:this.dataAll.price
				}
				console.log(data,"jinglei");
				uni.navigateTo({
					url:"/pages_mine/xuexikskgm?msg=" + encodeURIComponent(JSON.stringify(data))
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.xxkmsg {
		width: 100%;
		background-image: url("@/static/image/system/xuexik.png");
		background-size: 100% 100%;
	}

	.kskmsg {
		width: 100%;
		background-image: url("@/static/image/system/kaoshik.png");
		background-size: 100% 100%;
	}

	.bglan {
		background-color: #e6edf8;
		border: 1rpx solid #3478f5;
		border-radius: 20rpx;
	}
</style>